<template>
  <view class="search_content">
    <!-- 头部搜索栏 -->
    <view class="cu-bar bg-white search fixed">
      <i class="iconfont icon-xiangzuo" @click="goBack"></i>
      <view class="search-form round" :style="inputMargin">
        <input type="search" placeholder="全网搜索" confirm-type="search" v-model="choosenKeyword" @confirm="search(choosenKeyword)"
          @input="suggestion" focus />
        <!-- 清空按钮 -->
        <i v-if="choosenKeyword" class="cuIcon-search iconfont icon-guanbi" @click="choosenKeyword = ''"></i>
        <!-- 搜索按钮 -->
        <i class="cuIcon-search iconfont icon-iconfontzhizuobiaozhun22" @click="search(choosenKeyword)"></i>
      </view>
    </view>
    <!-- 搜索关联词 -->
    <view class="suggestion_box" v-show="showSuggestion && choosenKeyword">
      <Suggestion ref="suggestion" @handleChoosen="search" />
    </view>
    <view class="keywords_content" v-show="!showSuggestion || !choosenKeyword">
      <!-- 搜索历史 -->
      <view class="keywords_box" v-if="historyKeywords && historyKeywords.length > 0">
        <view class="clear" @click="clearHistory">清除记录</view>
        <view class="title">搜索历史</view>
        <view class="keywords">
          <text v-for="(item,index) in historyKeywords" :key="index" class="text" @click="search(item)">{{item}}</text>
        </view>
      </view>
      <!-- 热门搜索 -->
      <view class="keywords_box">
        <view class="title">热门搜索</view>
        <view class="keywords">
          <text v-for="(item,index) in hotKeywords" :key="index" class="text" @click="search(item)">{{item}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import Suggestion from './components/suggestion'
  export default {
    components: {
      Suggestion,
    },
    data() {
      return {
        choosenKeyword: '',
        historyKeywords: [],
        hotKeywords: [],
        showSuggestion: false,
      }
    },
    computed: {
      userInfo(){
        return this.$store.state.userInfo
      },
      inputMargin() {
        let margin = `margin-right: ${this.menuButton.left}rpx`
        return margin
      }
    },
    onLoad() {
      this.getInitData();
    },
    methods: {
      suggestion(target) {
        // 联想关键词
        this.showSuggestion = true;
        if (target.detail.value) {
          this.$refs.suggestion.getSuggestions(target.detail.value);
        }
      },
      search(keyword) {
        if (!keyword) {
          uni.showToast({
            icon: 'none',
            title: '请输入关键字搜索',
          });
          return;
        }
        // #ifndef H5 || APP-PLUS
        getApp().mtj.trackEvent('search_item', { // 埋点统计
          keyword: keyword,
          user_id: this.userInfo.id || 0,
        });
        // #endif
        // 搜索
        this.choosenKeyword = keyword
        this.saveSearchHistory(keyword);
        uni.navigateTo({
          url: `/pages/search/searchresult?keyWords=${keyword}`
        });
      },
      clearHistory() {
        // 清除历史记录
        uni.removeStorageSync('searchHistory');
        this.historyKeywords = []
      },
      saveSearchHistory(keyword) {
        // 存储搜索记录
        let oldKeywords = uni.getStorageSync('searchHistory');
        if (oldKeywords) {
          // 存在旧纪录
          let pos = oldKeywords.indexOf(keyword);
          if (pos >= 0) {
            // 当前搜索已存在
            oldKeywords.splice(pos, 1)
            oldKeywords.unshift(keyword)
          } else {
            oldKeywords.unshift(keyword)
            if (oldKeywords.length >= 21) {
              // 历史纪录超过20条
              oldKeywords.splice(oldKeywords.length - 1, 1)
            }
          }
          uni.setStorageSync('searchHistory', oldKeywords);
          this.historyKeywords = oldKeywords;
        } else {
          uni.setStorageSync('searchHistory', [keyword]);
          this.historyKeywords = [keyword];
        }
      },
      getInitData() {
        // 网络请求获取搜索热词
        this.$api.dtkapi.getHotKeywords({
          version: 'v1.0.1'
        }).then(res => {
          this.hotKeywords = res.data.hotWords.slice(0, 20)
        })
        // 获取历史搜索记录
        let keywords = uni.getStorageSync('searchHistory');
        if (keywords) {
          this.historyKeywords = keywords;
        }
      },
      goBack() {
        // 返回上一页
        uni.navigateBack({
          delta: 1
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .search_content {
    min-height: calc(100%);
    background-color: white;
    padding-top: 50px;
    margin-top: var(--status-bar-height);
    .search {
      .icon-xiangzuo {
        text-align: center;
        width: 120upx;
        line-height: 50px;
        display: inline-block;
      }
    }
    .cu-bar.fixed,
    .nav.fixed {
      top: 0;
      padding-top: var(--status-bar-height);
      position: fixed;
    }
    .cu-bar .search-form {
      margin: 0 20upx;
      padding-left: 20upx;
      .icon-guanbi {
        color: #cfcfcf;
      }
    }
    .suggestion_box {
      padding: 40upx 0 0 0;
    }
    .keywords_box {
      padding: 40upx 0 0 30upx;
      .clear {
        position: absolute;
        right: 30upx;
        ;
      }
      .title {
        color: #2c2c2c;
        font-size: 30upx;
        font-weight: 600;
      }
      .keywords {
        margin-top: 30upx;
        .text {
          color: #666;
          margin: 0 20upx 20upx 0;
          display: inline-block;
          border-radius: 20upx;
          padding: 10upx 20upx;
          background-color: #f6f6f6;
        }
        .text:active {
          color: #ffffff;
          background-color: #b9b7b8;
        }
      }
    }
  }
</style>
